<template>
  <div class="advertisement-setting" v-loading.fullscreen.lock="loading">
    <page-main :pagination="pagination" @search-data="searchData" @page-change="pageChange">
      <template slot="search">
        <search-form :search="search"></search-form>
      </template>
      <template slot="append">
        <el-button type="primary" size="medium" @click="addAdvertisement">新增</el-button>
      </template>
      <template slot="table">
        <el-table fit stripe border highlight-current-row :data="advertisementList" height="100%" class="advertisement-setting-table">
          <el-table-column prop="advertisementName" label="广告名称" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="广告类型" width="120px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`advertisement.advertisementSetting.type.${scope.row.advertisementType}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="广告图片" width="125px" align="center">
            <template slot-scope="scope">
              <el-image style="width:100px;height:100px" fit="scale-down" :src="scope.row.advertisementUrl[0]"
                :preview-src-list="scope.row.advertisementUrl">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="advertisementHref" label="跳转地址" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="advertisementSort" label="广告排序" width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <span :class="'status_'+scope.row.advertisementStatus">
                {{i18n.getMsg(`advertisement.advertisementSetting.status.${scope.row.advertisementStatus}`)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <div style="margin-bottom:5px">
                <el-button type="primary" size="mini" @click="updateAdvertisement(scope.row)">修改</el-button>
              </div>
              <div>
                <el-button type="danger" size="mini" @click="delAdvertisement(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </page-main>

    <el-dialog :title="dialogTitle[dialogType]" custom-class="sys-dialog" :close-on-click-modal="false" :visible.sync="openDialog" width="450px" top="10vh" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <advertisement-form v-if="openDialog" :advertisement="selectAdvertisement" :type="dialogType" @save-success="saveSuccess">
        </advertisement-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AdvertisementApi from 'services/advertisementApi';

  import PageMain from 'commonComponents/pageMain';
  import SearchForm from './searchForm';
  import AdvertisementForm from './advertisementForm';

  import Pagination from 'models/pagination';
  import AdvertisementSearch from 'models/advertisement/advertisementSearch';

  export default {
    data() {
      return {
        loading: false,
        search: new AdvertisementSearch(),
        pagination: new Pagination(),
        advertisementList: [],
        openDialog: false,
        dialogType: '',
        selectAdvertisement: null,
        dialogTitle: {
          add: "新增广告",
          update: "修改广告"
        }
      };
    },

    created() {
      this.setAdvertisementList(true);
    },

    methods: {
      setAdvertisementList(isSearch = false) {
        let search = this.search;
        if (!isSearch) {
          search.resetOldData();
        }

        let pagination = this.pagination;
        this.loading = true;
        AdvertisementApi.getAdvertisementList(search, pagination).then(advertisementList => {
          if (isSearch) {
            search.setOldData();
          }

          if (advertisementList.length === 0 && pagination.currentPage > 1) {
            this.$nextTick(() => {
              this.setAdvertisementList(isSearch);
            });
            return;
          }

          this.advertisementList = advertisementList;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      searchData() {
        this.pagination.currentPage = 1;
        this.setAdvertisementList(true);
      },

      pageChange() {
        this.setAdvertisementList();
      },

      addAdvertisement() {
        this.dialogType = 'add';
        this.openDialog = true;
      },

      updateAdvertisement(advertisement) {
        this.dialogType = 'update';
        this.selectAdvertisement = advertisement;
        this.openDialog = true;
      },

      saveSuccess() {
        this.openDialog = false;
        this.setAdvertisementList();
      },

      dialogClosed() {
        this.dialogType = '';
        this.selectAdvertisement = null;
      },

      delAdvertisement(advertisement) {
        this.$confirm('是否确定删除该广告设置', '删除').then(() => {
          this.toDelAdvertisement(advertisement);
        }).catch(() => {});
      },

      toDelAdvertisement(advertisement) {
        this.loading = true;
        AdvertisementApi.delAdvertisement(advertisement.id).then(() => {
          this.loading = false;
          this.$alert('广告删除成功', '信息', {
            callback: () => {
              this.setAdvertisementList();
            }
          });
        }).catch(() => {
          this.loading = false
        });
      }
    },

    components: {
      PageMain,
      SearchForm,
      AdvertisementForm
    }
  };

</script>

<style lang="scss" scoped>
  .advertisement-setting {
    height: 100%;

    .status_0 {
      color: #ff0000;
    }

    .status_1 {
      color: #11b95c;
    }
  }

</style>
